<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="flexWrap" style="align-items: flex-start;">
					<view class="table-info flexWrapNo">
						<view class="big">{{numText}}</view>
						<view class="info">
							<view class="table-name">{{characters}} 
								<text class="status" :class="{busy:tableInfo.status==2||tableInfo.status==99,repair:tableInfo.status==3}">{{tableInfo.status==2||tableInfo.status==99?'使用中':tableInfo.status==3?'维护':'空闲'}}</text>
							</view>
							<view class="store-name">
								默认就近一小时开台
							</view>
						</view>
					</view>
					<view class="coupon-info flexWarpCenterColumn">
						<view class="num">{{totalHour}}</view>
						<view>小时</view>
						<view class="tips">安逸貘鱼</view>
					</view>
				</view>
				<view class="time-box">
					<view class="top-box" v-if="order_type=='make_appointment'">
						<view class="title">选时间</view>
						<view>价格:{{reality_price/totalHour}}元/小时</view>
						<view class="date-select-box flexWrapNo">
							从
							<view class="date-box flexWrapNo">
								<picker @change="changeDate" :value="dateIndex" :range="dateList" range-key="riqis">
									<view class="flexWrapNo">
										<view class="uni-input">{{dateList[dateIndex].riqis}}</view>
										<image src="../static/home/down-icon.png" class="down-icon"></image>
									</view>
								</picker>
							</view>
							<picker mode="time" :value="currmentTime" :start="startTime" end="24:00"
								@change="bindTimeChange">
								<view class="time flexWrapNo">
									<view class="reduce-btn">
										<text
											v-for="(item,index) in currmentTime.split(':')[0].split('')">{{item}}</text>
									</view>
									<view class="colon">:</view>
									<view class="reduce-btn">
										<text
											v-for="(item,index) in currmentTime.split(':')[1].split('')">{{item}}</text>
									</view>
								</view>
							</picker>
							开始
						</view>
					</view>
					<view class="bottom-box">
						<scroll-view scroll-x enable-flex :scroll-into-view="scrollIndex" class="lattice-box">
							<view class="lattice" :id="'lattice-'+index" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}" v-for="(item,index) in hoursList" :key="index">
								{{item.time}}
								<view class="lable"></view>
							</view>
						</scroll-view>
						<view class="select-time-box flexWrap">
							<view class="select-time">
								<view class="title">已选时间</view>
								<view>{{currmentDate}} {{currmentTime}}～<text v-if="allHour>23">次日</text>{{nextTime}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="explain-box">
					<view class="explain-cont">
						<view v-html="tableInfo.immediately_opening_explain" v-if="order_type=='immediately'"></view>
						<view v-html="tableInfo.make_opening_explain" v-else></view>
					</view>
				</view>
				<view class="btn-box">
					<view class="pay-btn" @tap="comfirmPay()">确认开台</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-image">
						<image src="/static/public/success-icon.png"></image>
					</view>
					<view class="tips-name">开台成功</view>
					<view class="tips-btn" @tap="closeTips()">知道了</view>
				</view>
				<view class="mask-box" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
				currmentDate:"",
				currentHour:0,
				startTime:"",
				currmentTime:"",
				nextTime:"",
				totalHour:1,
				pastHour:0,
				dateIndex:0,
				dateList:[],
				status:0,
				meituan_id:"",
				tableInfo:{},
				hoursList:[],
				order_price:"",
				yingfu_price:"",
				reality_price:"",
				couponName:"",
				couponData:{
					available_weekly_data: "monday,tuesday,wednesday,thursday",
					custom_times: "2022-11-01 00:00:00 - 2022-11-30 23:59:59",
					date_limit_data: "custom",
					duration: 1,
					id: 3,
					meituan_id: "943017524",
					original_price: "1.00",
					price: "1.00",
					store_id: 4,
					title: "优惠券",
				},
				order_no:"166711066155520060024225",
				tipsFlage:false,
				weekArr:['sunday','monday','tuesday','wednesday','thursday','friday','saturday'],
				weekstring:"",
				dateLimit:"",
				customTime:"",
				allHour:0,
				order_id:"",
				douyinOrder_id:"",
				qr_code:"",
				verify_token:"",
				encrypted_code:"",
				douyin_id:"",
				id:"",
				scrollIndex: "",
				order_type:"",
				numText:"",
				characters:""
			}
		},
		onLoad(ops) {
			this.qr_code=ops.qr_code
			this.douyin_id=ops.douyin_id
			this.order_type=ops.order_type
			let navtitle = ''
			navtitle = this.order_type == 'make_appointment' ? '预约开台' : '立即开台'
			uni.setNavigationBarTitle({
				title: navtitle
			})
			this.$tools.loadIng();
			this.geCouponDetails();
			this.tableDetails();
			this.getHoursData();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			changeMeal(index) {
				this.currmentIndex = index
			},
			showTips() {
				this.tipsFlage = true
			},
			closeTips() {
				this.tipsFlage = false
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/order'
					})
				}, 1000)
			},
			// 选择时间
			bindTimeChange: function(e) {
				if (this.dateIndex != 0) { //如果不是今天
					if (Number(e.detail.value.split(':')[0]) + Number(this.totalHour) >= 24) {
						this.$tools.showToast('每日可选时间为24小时')
						return;
					}
				} else {
					if (this.tableInfo.yuyue == '23:59') {
						this.dateIndex += 1
						if (this.currmentIndex >= 1) { //如果是预约就选择当前日期下的格子
							let key = Object.keys(this.tableInfo.t_date)
							this.hoursList = this.tableInfo.t_date[key[this.dateIndex]] //获取当前天的格子
							this.currmentDate = this.getDate(1, this.dateIndex)
							if (this.dateIndex != 0) { //不是今天
								this.startTime = "00:00"
								this.currmentTime = "00:00"
								this.pastHour = -1
								this.currentHour = 0
								this.allHour = Number(this.totalHour) + Number(this.currentHour)
								let currmentDate = this.getDate(0) + ' ' + this.currmentTime
								this.nextTime = this.getTimeString(currmentDate, this.totalHour) //下一个小时的时间
							} else {
								this.getHoursData();
								this.hoursList = this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]]) //如果是今天就获取第二天的格子
							}
						}
					}
					if (this.allHour == 47) {
						this.$tools.showToast('最多可选次日时间')
						return
					}
				}
				let selectDate = this.getDate(0, this.dateIndex) + ' ' + e.detail.value
				let timestamp = Date.parse(new Date()) / 1000;
				let selectTimestamp = new Date(selectDate).getTime() / 1000;
				if (timestamp > selectTimestamp) {
					console.log('>')
					let addTime = this.addMinutes(this.getDate(0) + ' ' + this.getTimeString(), 5)
					let currmentDate = this.getDate(0) + ' ' + addTime
					this.currmentTime = this.getTimeString(currmentDate)
					this.nextTime = this.getTimeString(currmentDate, this.totalHour)
				} else {
					this.currmentTime = e.detail.value
					let currmentDate = this.getDate(0) + ' ' + this.currmentTime
					this.nextTime = this.getTimeString(currmentDate, this.totalHour) //下一个小时的时间
				}
				this.currentHour = this.currmentTime.split(':')[0]
				this.allHour = Number(this.totalHour) + Number(this.currentHour)
			},
			getTimeData() {
				var time = new Date();
				this.currentHour = time.getHours() //当前小时
				this.allHour = Number(this.totalHour) + Number(this.currentHour)
				this.pastHour = this.currentHour - 1 //过去了多少个小时
				console.log(this.currentHour)
			},
			isToday(today, date) {
				if (!date) return;
				var d = new Date(date.replace(/-/g, "/"));
				var todaysDate = today ? new Date(today.replace(/-/g, "/")) : new Date();
				return d.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0);
			},
			greaterToday(today, date) {
				if (!date) return;
				var d = new Date(date.replace(/-/g, "/"));
				var todaysDate = today ? new Date(today.replace(/-/g, "/")) : new Date();
				return d.setHours(0, 0, 0, 0) > todaysDate.setHours(0, 0, 0, 0);
			},
			// 加分钟
			addMinutes(date, num) {
				var time = new Date();
				var time1 = Date.parse(date.replace(/-/g, '/'))
				time.setTime(time1 + 60000 * num);
				let hours = time.getHours() <= 9 ? '0' + time.getHours() : time.getHours()
				let minutes = time.getMinutes() <= 9 ? '0' + time.getMinutes() : time.getMinutes()
				return hours + ":" + minutes
			},
			// 获取当前日期
			getDate(type, num) {
				num = num || 0
				var time = new Date();
				time.setDate(time.getDate() + num);
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let day = time.getDate()
				let fullDate = ""
				if (type == 0) {
					fullDate = year + '-' + month + '-' + day
				} else {
					fullDate = month + '月' + day + '日'
				}
				return fullDate;
			},
			// 获取当前时间
			getTimeString(currmentDate, num) {
				num = num || 0
				var time = new Date();
				//var time1 =currmentDate?Date.parse(currmentDate):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				var time1 = currmentDate ? Date.parse(currmentDate.replace(/-/g, '/')) : new Date()
			.getTime(); //如果传了日期就获取日期，否则获取当前时间
				time.setTime(time1 + 3600000 * num);
				let hours = time.getHours() <= 9 ? '0' + time.getHours() : time.getHours()
				let minutes = time.getMinutes() <= 9 ? '0' + time.getMinutes() : time.getMinutes()
				return hours + ":" + minutes
			},
			// 获取各个参数
			getHoursData() {
				var time = new Date();
				this.currentHour = time.getHours() //当前小时
				if ((this.tableInfo.yuyue && this.order_type != 'immediately') || this.renew_order_id) { //如果有预约时间就从预约时间开始
					let addTime = this.addMinutes(this.getDate(0) + ' ' + this.tableInfo.yuyue, 1)
					let currmentTime = this.getDate(0) + ' ' + addTime
					this.currmentTime = this.getTimeString(currmentTime)
					this.nextTime = this.getTimeString(currmentTime, this.totalHour)
					this.startTime = this.getTimeString(currmentTime)
					if (this.tableInfo.day_yuyue) { //如果有预约
						this.currentHour = this.tableInfo.yuyue.split(':')[0]
						if (this.isToday(this.getDate(0, this.dateIndex), this.tableInfo.day_yuyue)) {
							console.log('是同一天111111')
						} else {
							this.dateIndex += 1
							this.nextIndex = this.dateIndex + 1
							let key = Object.keys(this.tableInfo.t_date)
							this.hoursList = this.tableInfo.t_date[key[this.dateIndex]] //获取当前天的格子
							console.log('不是同一天111111')
						}
					}
				} else {
					this.currmentTime=this.getTimeString()//获取当前时间
					this.nextTime=this.getTimeString('',this.totalHour)//下一个小时的时间
					this.startTime=this.getTimeString()
					if(this.order_type == 'make_appointment'){
						let addTime=this.addMinutes(this.getDate(0)+' '+this.getTimeString(),5)
						let currmentTime=this.getDate(0)+' '+addTime
						this.currmentTime=this.getTimeString(currmentTime)
						this.nextTime=this.getTimeString(currmentTime,this.totalHour)
						this.startTime=this.getTimeString(currmentTime)
					}
				}
				this.allHour = Number(this.totalHour) + Number(this.currentHour)
				this.pastHour = this.currentHour - 1 //过去了多少个小时
				if (this.order_type == 'immediately') {
					this.currmentDate = this.getDate(1, this.dateIndex); //获取当前日期
				} else {
					this.currmentDate = this.tableInfo.yuyue != '23:59' ? this.getDate(1, this.dateIndex) : this.getDate(1,
						1); //获取当前日期
				}
				setTimeout(()=>{
					this.scrollIndex = 'lattice-' + Number(this.currentHour - 2)
					console.log(this.scrollIndex)
				},500)
			},
			changeMeal(index) {
				this.currmentIndex = index
				this.dateIndex = 0 //天数恢复默认
				let key = Object.keys(this.tableInfo.t_date)
				this.hoursList = this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
				this.getHoursData();
			},
			// 选择日期
			changeDate(e) {
				console.log(e)
				let index = e.detail.value
				if (this.tableInfo.day_yuyue) { //如果有预约
					if (this.isToday(this.getDate(0, index), this.tableInfo.day_yuyue)) {
						console.log('是同一天111111')
					} else {
						if (this.greaterToday(this.getDate(0, index), this.tableInfo.day_yuyue)) {
							console.log('预约时间大于今天')
							this.$tools.showToast('当前日期没有可预约的时段')
							return;
						} else {
							console.log('预约时间不大于今天')
						}
					}
				}
				if (this.dateIndex == index) {
					return;
				}
				this.dateIndex = Number(index)
				if (this.currmentIndex > 0) {
					this.totalHour = this.mealList[this.currmentIndex].duration
				} else {
					this.totalHour = 1 //选择的小时数恢复默认
				}
				if (this.currmentIndex >= 0) { //如果是预约就选择当前日期下的格子
					let key = Object.keys(this.tableInfo.t_date)
					this.hoursList = this.tableInfo.t_date[key[this.dateIndex]] //获取当前天的格子
					this.currmentDate = this.getDate(1, this.dateIndex)
					if (this.dateIndex != 0) { //不是今天
						this.startTime = "00:00"
						this.currmentTime = "00:00"
						this.pastHour = -1
						this.currentHour = 0
						this.allHour = Number(this.totalHour) + Number(this.currentHour)
						let currmentDate = this.getDate(0) + ' ' + this.currmentTime
						this.nextTime = this.getTimeString(currmentDate, this.totalHour) //下一个小时的时间
						// this.getHoursData();
					} else {
						this.getHoursData();
						if (this.days_in_advance == 0 || this.days_in_advance == 1) {
							this.hoursList = this.tableInfo.t_date[key[0]]
						} else {
							this.hoursList = this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						}
					}
				}
				if (this.dateIndex == 0) {
					this.scrollIndex = 'lattice-' + Number(this.currentHour - 2)
				} else {
					this.scrollIndex = 'lattice-0'
				}

			},
			// 桌球详情
			tableDetails() {
				this.$request.post(this.$api.tableDetails, {
					store_id: uni.getStorageSync('store_id'),
					equipment_id: uni.getStorageSync('equipment_id')
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.tableInfo = data
						let nameList=this.tableInfo.equipment_name.split('')
						let isNaNEmpty = false //是否有数字
						isNaNEmpty =nameList.some(item =>!isNaN(item))
						if(!isNaNEmpty||isNaN(nameList[0])){	
							for(let i in nameList){
								if(i==0){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}else{
							for(let i in nameList){
								if(!isNaN(nameList[i])){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}
						let key = Object.keys(this.tableInfo.t_date)
						this.hoursList = this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						if (data.days_in_advance == 1) {
							this.dateList = [{
								riqis: '今天'
							}]
						} else if (data.days_in_advance == 2) {
							this.dateList = [{
								riqis: '今天'
							}, {
								riqis: '明天'
							}]
						} else {
							this.dateList = [{
								riqis: '今天'
							}, {
								riqis: '明天'
							}, {
								riqis: '后天'
							}]
						}
					}
				})
			},
			// 团购券详情
			geCouponDetails(){
				this.$request.post(this.$api.dyCouponDetails, {
					store_id:uni.getStorageSync('store_id'),
					douyin_id:this.douyin_id,
					qr_code:this.qr_code,
					type:"save"
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if(res.code==1){
						this.douyinOrder_id=data.order_id
						this.verify_token=data.verify_token
						this.encrypted_code=data.encrypted_code
						this.id=data.id
						this.order_price=data.original_price
						this.reality_price=data.reality_price
						this.yingfu_price=data.price
						this.couponName=data.title
						this.totalHour=data.duration
						this.dateLimit=data.date_limit_data
						this.weekstring=data.available_weekly_data
						this.customTime=data.custom_times||""
						this.getHoursData();
					}else{
						uni.hideToast()
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function(res) {
								if(res.confirm){
									uni.navigateBack({
										delta:1
									})
								}
							}
						});
					}
				})
			},
			isDuringDate(currDate, beginDateStr, endDateStr) {
				let curDate = new Date(currDate);
				let beginDate = new Date(beginDateStr);
				let endDate = new Date(endDateStr);
				if (curDate >= beginDate && curDate <= endDate) {
					return true;
				}
				return false;
			},
			// 确认开台
			comfirmPay(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						uni.showLoading({
							title:'加载中...',
							mask:true
						})
						let start_time=""
						if(this.order_type=='make_appointment'){
							start_time=this.currmentTime
						}
						let orderData={
							order_id:this.douyinOrder_id,
							verify_token:this.verify_token,
							encrypted_code:this.encrypted_code,
							store_id:uni.getStorageSync('store_id'),
							store_equipment_id:uni.getStorageSync('equipment_id'),
							store_name:this.tableInfo.shop_name,
							order_type:this.order_type,
							order_price:this.order_price,
							reality_price:this.reality_price,
							yingfu_price:this.yingfu_price,
							pay_type:4,
							is_ci:this.allHour>23?1:0,
							douyin_code:this.qr_code,
							id:this.id,
							types:uni.getStorageSync('type'),
							hour_start_time:start_time,
							hours:this.totalHour,
							day_type:this.dateIndex
						}
						this.submitOrder(orderData);
					}
				})
			},
			submitOrder(orderData){
				this.$request.post(this.$api.douyinVerificationOrder,orderData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if(res.code==1){
						this.order_id=data.order_id
						this.showTips()
					}else{
						uni.hideToast()
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function(res) {
								
							}
						});
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},

		}
	}
</script>

<style lang="scss">
	.content {
		padding: 28upx;
		padding-bottom: 400upx;
	}

	.table-info {
		.big {
			font-family: Arial, Arial;
			font-weight: bold;
			font-size: 136rpx;
			color: #F9FAFE;
		}

		.info {
			margin-left: 20upx;

			.table-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #F9FAFE;

				.status {
					display: inline-block;
					width: 118rpx;
					line-height: 48upx;
					height: 48rpx;
					background: linear-gradient(180deg, #4AA22A 0%, #69D037 100%);
					border-radius: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					text-align: center;
					margin-left: 18upx;
				}

				.busy {
					background: #FF8A57;
				}

				.repair {
					background: #848C95;
				}
			}

			.store-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-top: 20upx;
				opacity: .5;
			}
		}
	}

	.coupon-info {
		width: 234upx;
		height: 250upx;
		background: url("../static/home/coupon.png") center/100% 100%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 27rpx;
		color: #000000;

		.num {
			font-family: Arial, Arial;
			font-weight: bold;
			font-size: 63rpx;
			color: #141414;
			padding: 18upx 0;
			padding-bottom: 4upx;
		}

		.tips {
			font-weight: 600;
			font-size: 24rpx;
			color: #365439;
		}
	}

	.select-box {
		margin-top: 30upx;
		overflow-x: scroll;

		.select-item {
			width: 222rpx;
			height: 240rpx;
			background: #232428;
			border-radius: 20rpx;
			margin-right: 14upx;
			flex: none;

			.select-top {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				padding-left: 32upx;

				.select-icon {
					width: 72upx;
					height: 72upx;
					padding: 14upx;
				}
			}

			.select-bottom {
				padding-left: 32upx;
				margin-top: 40upx;

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
					@include ellipsis(1);
				}

				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-top: 8upx;
				}
			}
		}

		.active {
			background: linear-gradient(180deg, #3D46C7 0%, #7781FD 100%);
		}
	}

	.time-box {
		margin-top: -50upx;
		position: relative;

		.top-box {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #8C8C8E;
			background: #232428;
			border-radius: 20rpx;
			padding: 40upx 32upx;
			margin-bottom: 14upx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 34rpx;
				color: #FFFFFF;
				margin-bottom: 12upx;
			}

			.date-select-box {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #919294;
				margin-top: 24upx;

				.date-box {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					color: #FFFFFF;
					border-radius: 48rpx;
					border: 2rpx solid #4F5053;
					padding: 24upx;
					margin-left: 12upx;

					.down-icon {
						width: 30upx;
						height: 20upx;
						margin-left: 20upx;
					}
				}

				.time {
					border-radius: 48rpx;
					border: 2rpx solid #4F5053;
					padding: 16upx;
					margin-left: 4upx;
					margin-right: 12upx;

					.reduce-btn {
						text {
							display: inline-block;
							width: 64rpx;
							height: 64rpx;
							line-height: 64upx;
							text-align: center;
							background: #464F58;
							border-radius: 50%;
							margin-right: 4upx;
						}
					}

					.colon {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #FFFFFF;
						margin: 0 4upx;
					}
				}
			}
		}

		.bottom-box {
			padding: 40upx 32upx;
			background: #232428;
			border-radius: 20rpx;
		}

		.lattice-box {
			padding: 40upx 0;
			border-top: 2rpx dashed #707070;
			border-bottom: 2rpx dashed #707070;
			margin-top: 38upx;
			overflow-x: scroll;
			width: 100%;
			white-space: nowrap;

			.lattice {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 48rpx;
				color: #4F4F53;
				margin-right: 50upx;
				flex: none;
				display: inline-block;
			}

			.blue {
				background: #7781FD !important;
				border-radius: 50%;
				width: 90upx;
				height: 90upx;
				line-height: 90upx;
				text-align: center;
				color: #FFFFFF;
				margin-right: 14upx;
				position: relative;

				// z-index: 999;
				.lable {
					position: absolute;
					background: #3D46C7;
					height: 90upx;
					width: 100upx;
					top: 0;
					z-index: -1;
					border-radius: 6%;
					left: 54upx;
				}
			}

			.white {
				color: #FFFFFF;
			}

			.red {
				background: #FF4726 !important;
				border-radius: 50%;
				width: 90upx;
				height: 90upx;
				line-height: 90upx;
				text-align: center;
				color: #FFFFFF;
				margin-right: 14upx;
			}
		}

		.select-time-box {
			margin-top: 28upx;

			.select-time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #919294;
					margin-bottom: 16upx;
				}
			}
		}
	}

	.explain-box {
		margin-top: 28upx;
		border-top: 2upx solid #55525D;

		.explain-cont {
			margin-top: 36upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #969696;

			.explain-text {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #969696;
			}

			rich-text {
				p {
					color: #969696;
				}
			}
		}
	}

	.btn-box {
		position: fixed;
		left: 20upx;
		right: 20upx;
		bottom: 30upx;

		.pay-btn {
			height: 144rpx;
			line-height: 144rpx;
			background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
			border-radius: 72rpx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			margin: auto;
			margin-top: 24upx;
		}
	}
	.tips-box{
		width: 660upx;
		height: 502upx;
		background:#232428;
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-image{
			width: 80upx;
			height: 80upx;
			margin-top: 62upx;
			margin-bottom: 36upx;
		}
		.invalid{
			width: 144upx;
			height: 144upx;
			margin-top: 44upx;
			margin-bottom: 14upx;
		}
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #FFFFFF;
		}
		.tips-text{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #FFFFFF;
			margin-top: 32upx;
		}
		.tips-btn{
			width: 286upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #69D037;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 52upx;
		}
		.solid-btn{
			background-color: #69D037;
		}
	}
</style>